<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="订单列表"></navbar>
		<u-tabs :list="tabsList" :is-scroll="false" :height="80" :active-color="themeColor" :bar-style="{ top: '100%' }" :current="tabsIndex" @change="changeCurrentTab" />

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni
				ref="mescrollRef"
				:fixed="false"
				:up="{
					auto: false,
					noMoreSize: 3,
					empty: {
						icon: '/static/images/empty/order.png',
						tip: '暂无订单~',
						fixed: true
					}
				}"
				:down="{ auto: false }"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
			>
				<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
					<view class="order-contain" v-if="currentTab['sign'] === tabItem['sign']">
						<view class="order" v-for="orderItem in tabsList[tabIndex].list" :key="orderItem.id">
							<!-- Order Header -->
							<view class="order-header">
								<!-- S 订单Tag -->
								<template v-if="orderItem.delivery_type === 2">
									<view class="order-tag order-tag--green">自提</view>
								</template>
								<template v-if="[1, 2, 3].includes(orderItem.order_type)">
									<view :class="['order-tag', `order-tag--${orderType[orderItem.order_type]['style']}`]">{{ orderType[orderItem.order_type]['name'] }}</view>
								</template>
								<!-- E 订单Tag -->

								<view class="order-sn">订单编号:{{ orderItem.sn }}</view>
								<template v-if="orderItem.delivery_type === 1 || orderItem.delivery_type === 4">
									<view :class="['order-status', `order-status--${orderStatus[orderItem.order_status]['style']}`]">
										{{ orderStatus[orderItem.order_status]['name'] }}
									</view>
								</template>
								<template v-else-if="orderItem.delivery_type === 2">
									<view :class="['order-status', `order-status--${orderSelffetchStatus[orderItem.order_status]['style']}`]">
										{{ orderSelffetchStatus[orderItem.order_status]['name'] }}
									</view>
								</template>
							</view>

							<!-- Order Main -->
							<view class="order-main" @tap="goOrderDetail(orderItem.id)">
								<goods-card
									v-for="(goodsItem, goodsIndex) in orderItem.order_goods"
									:key="goodsIndex"
									shape="rectangle"
									:name="goodsItem.goods_name"
									:image="goodsItem.goods_image"
									:contain-style="{ 'border-raius': 0, height: '230rpx' }"
									:image-style="{ width: '180rpx', height: '180rpx' }"
								>
									<view class="flex-1" slot="default">
										<text class="muted xs m-t-10 skuline">{{ goodsItem.spec_value_str }}</text>
										<view class="m-t-10 flex row-between">
											<price
												v-if="orderItem.order_type == 0 || orderItem.order_type == 4"
												:content="goodsItem.original_price"
												mainSize="32rpx"
												minorSize="24rpx"
											/>
											<price v-else :content="goodsItem.goods_price" mainSize="32rpx" minorSize="24rpx" />
											<text class="lighter sm">x{{ goodsItem.goods_num }}</text>
										</view>
									</view>
								</goods-card>
								<view class="order-desc">
									<text>共{{ orderItem.total_num }}件商品,应付款:</text>
									<price class="normal lg" :content="orderItem.order_amount" />
								</view>
							</view>

							<!-- Order Footer -->
							<view class="order-footer" v-if="orderItem.buttons.length">
								<block v-for="buttonItem in orderItem.buttons" :key="buttonItem.event">
									<view
										:class="['order-button', `order-button--${buttonItem.style}`]"
										@tap="onOrderButtons(buttonItem['event'], orderItem.id, orderItem.pay_way)"
									>
										{{ buttonItem.name }}
									</view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import { apiOrderList } from '@/api/order';
import OrderMixin from '@/mixins/order';
import { PaymentStatusEnum } from '@/utils/enum';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
export default {
	name: 'OrderList',
	mixins: [OrderMixin, MescrollMixin],
	data() {
		return {
			// Tabs列表
			tabsList: [
				{
					sign: 'all',
					name: '全部',
					list: []
				},
				{
					sign: 'pay',
					name: '待付款',
					list: []
				},
				{
					sign: 'delivery',
					name: '待发货',
					list: []
				},
				{
					sign: 'take',
					name: '待收货',
					list: []
				},
				{
					sign: 'finish',
					name: '已完成',
					list: []
				},
				{
					sign: 'close',
					name: '已关闭',
					list: []
				}
			],
			tabsIndex: '', // Tabs索引

			// 订单状态
			orderStatus: {
				0: {
					name: '待付款',
					style: 'primary'
				},
				1: {
					name: '待发货',
					style: 'primary'
				},
				2: {
					name: '待收货',
					style: 'primary'
				},
				3: {
					name: '已完成',
					style: 'primary'
				},
				4: {
					name: '已关闭',
					style: 'muted'
				}
			},

			// 订单状态
			orderSelffetchStatus: {
				0: {
					name: '待付款',
					style: 'primary'
				},
				1: {
					name: '待取货',
					style: 'primary'
				},
				3: {
					name: '已完成',
					style: 'primary'
				},
				4: {
					name: '已关闭',
					style: 'muted'
				}
			},

			// 订单类型
			orderType: {
				1: {
					name: '拼团',
					style: 'pink'
				},
				2: {
					name: '秒杀',
					style: 'red'
				},
				3: {
					name: '砍价',
					style: 'blue'
				}
			}
		};
	},

	computed: {
		// 当前Tab项
		currentTab() {
			return this.tabsList[this.tabsIndex] || {};
		},

		// 映射Tabs项
		mapTabsItem() {
			return (sign) => this.tabsList.find((item) => item['sign'] === sign);
		}
	},

	methods: {
		// 更改当前Tab页
		changeCurrentTab(index) {
			this.tabsIndex = index;
			this.refreshOrderData();
		},

		// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
		refreshOrderData() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},

		// 上拉加载更多
		upCallback({ num, size }) {
			const sign = this.currentTab.sign;
			apiOrderList({
				type: sign,
				page_no: num,
				page_size: size
			})
				.then(({ lists, page_size, count }) => {
					const tab = this.mapTabsItem(sign);
					lists.forEach((item) => (item['buttons'] = this.getOrderStatusButtons(item.btn) ?? []));
					if (num === 1) tab.list = [];
					tab.list = [...tab.list, ...lists];
					this.mescroll.endSuccess(lists.length, count);
				})
				.catch((err) => {
					this.mescroll.endErr();
				});
		},

		// 去订单详情
		goOrderDetail(id) {
			this.$Router.push({
				path: '/pages/order_detail/order_detail',
				query: { order_id: id }
			});
		}
	},

	onLoad() {
		const options = this.$Route.query;
		const mode = options.mode ?? 'all';
		const tabIndex = this.tabsList.findIndex((item) => item['sign'] === mode);

		this.changeCurrentTab(tabIndex);
		setTimeout(() => {}, 0.5 * 1000);

		// 监听全局duringPayment事件
		uni.$on('duringPayment', ({ result }) => {
			if (result === PaymentStatusEnum['SUCCESS']) {
				this.$Router.back();
				setTimeout(() => {
					this.$toast({ title: '支付成功' });
				}, 0.5 * 1000);
				this.refreshOrderData();
			}
		});
	},
	onUnload() {
		uni.$off('duringPayment');
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding: 0;
}
.order-list {
	height: 100%;
	display: flex;
	flex-direction: column;
	.order-item {
		flex: 1;
		min-height: 0;
	}
}
.order-contain {
	padding: 0 20rpx;
}

.order {
	padding-left: 20rpx;
	margin-top: 20rpx;
	border-radius: 5px;
	background-color: #ffffff;

	&-header {
		display: flex;
		height: 80rpx;
		align-items: center;
		padding-right: 20rpx;
		border-bottom: $-solid-border;

		.order-tag {
			padding: 4rpx 10rpx;
			margin-right: 10rpx;
			border-radius: 2px;
			font-size: $-font-size-xxs;
			color: #ffffff;

			&--pink {
				background: linear-gradient(#ff369a 0%, #ff2c3c 100%);
			}

			&--red {
				background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
			}

			&--blue {
				background: linear-gradient(#fa6aa9 0%, #fc00bb 100%);
			}

			&--green {
				background: linear-gradient(#0cc21e 0%, #06c160 100%);
			}
		}

		.order-sn {
			font-size: $-font-size-nr;
		}

		.order-status {
			margin-left: auto;
			font-size: $-font-size-sm;

			&--primary {
				@include font_color();
			}

			&--muted {
				color: $-color-muted;
			}
		}
	}

	&-main {
		.order-desc {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 20rpx;
			font-size: $-font-size-xs;
			color: $-color-muted;
		}
	}

	&-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100rpx;
		padding-right: 20rpx;
		border-top: $-solid-border;

		.order-button {
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			border-radius: 60px;
			font-size: $-font-size-nr;

			&:nth-child(n + 2) {
				margin-left: 20rpx;
			}

			&--primary {
				@include background_color() color: #ffffff;
			}

			&--normal {
				border-width: 1px;
				border-style: solid;
				@include border_color() @include font_color();
			}

			&--muted {
				border: $-solid-border;
				color: $-color-lighter;
			}
		}
	}
}
</style>
